import React, { useState, useRef, useEffect } from 'react';
import { Modal, Form, Select, Tree, Row, Col, Input } from 'antd';
import { FileOutlined } from '@ant-design/icons';
import type { DraggableData, DraggableEvent } from 'react-draggable';
import { getAdminRole } from '@/services/userManagement';
import Draggable from 'react-draggable';

interface IProps {
  isModalOpen?: boolean;
  setIsModalOpen: (flag: boolean) => void;
  tableSelectedRows?: any;
}

const { Option } = Select;

const RoleAuthorization: React.FC<IProps> = (props) => {
  const { isModalOpen, tableSelectedRows, setIsModalOpen } = props;
  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>(['0-0', '0-1']);
  const [checkedKeys, setCheckedKeys] = useState<React.Key[]>(['0-0']);
  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
  const [threeData, setThreeData] = useState<React.Key[]>([]); // 请求回来的three数据
  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
  const [disabled, setDisabled] = useState(false);
  const [bounds, setBounds] = useState({
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
  });
  const draggleRef = useRef<HTMLDivElement>(null);

  const [form] = Form.useForm();

  // 开始拖拽回调
  const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
    const { clientWidth, clientHeight } = window.document.documentElement;
    const targetRect = draggleRef.current?.getBoundingClientRect();
    if (!targetRect) {
      return;
    }
    setBounds({
      left: -targetRect.left + uiData.x,
      right: clientWidth - (targetRect.right - uiData.x),
      top: -targetRect.top + uiData.y,
      bottom: clientHeight - (targetRect.bottom - uiData.y),
    });
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const onExpand = (expandedKeysValue: React.Key[]) => {
    console.log('onExpand', expandedKeysValue);

    setExpandedKeys(expandedKeysValue);
    setAutoExpandParent(false);
  };

  const onCheck = (checkedKeysValue: React.Key[]) => {
    console.log('onCheck', checkedKeysValue);
    setCheckedKeys(checkedKeysValue);
  };

  const onSelect = (selectedKeysValue: React.Key[], info: any) => {
    console.log('onSelect', info);
    setSelectedKeys(selectedKeysValue);
  };

  function creactThreeData(data: any) {
    data.map((item) => {
      return (item.icon = <FileOutlined />);
    });
    setThreeData(data);
  }

  useEffect(() => {
    getAdminRole().then(({ data }) => {
      creactThreeData(data);
    });
    if (tableSelectedRows) {
      const formData = tableSelectedRows[0];
      form.setFieldsValue({
        lovelangue: formData?.name,
        bangdinggong: formData?.createPeople,
      });
    }
  }, [tableSelectedRows]);
  return (
    <Modal
      title={
        <div
          style={{
            width: '100%',
            cursor: 'move',
          }}
          onMouseOver={() => {
            if (disabled) {
              setDisabled(false);
            }
          }}
          onMouseOut={() => {
            setDisabled(true);
          }}
        >
          角色授权
        </div>
      }
      onOk={handleOk}
      onCancel={handleCancel}
      width="600px"
      modalRender={(modal) => (
        <Draggable
          disabled={disabled}
          bounds={bounds}
          onStart={(event, uiData) => onStart(event, uiData)}
        >
          <div ref={draggleRef}>{modal}</div>
        </Draggable>
      )}
      open={isModalOpen}
    >
      <>
        <Form
          labelAlign="right"
          labelCol={{ style: { width: 60 } }}
          labelWrap={true}
          form={form}
          name="enableDisable"
          style={{ width: '100%' }}
        >
          <Row gutter={24}>
            <Col span={12}>
              <Form.Item label="操作员" name="lovelangue">
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="姓名"
                name="bangdinggong"
                initialValue={'单位类型'}
              >
                <Input />
              </Form.Item>
            </Col>
          </Row>
        </Form>

        <Tree
          style={{ height: '300px', overflow: 'auto' }}
          checkable
          showIcon
          onExpand={onExpand}
          expandedKeys={expandedKeys}
          autoExpandParent={autoExpandParent}
          onCheck={onCheck}
          checkedKeys={checkedKeys}
          onSelect={onSelect}
          selectedKeys={selectedKeys}
          treeData={threeData}
        />
      </>
    </Modal>
  );
};

export default RoleAuthorization;
